<template>
  <div class="box">
    <div class="box_title flex">
      <div
        class="box_title_lf flex"
        @click="searchDateClick(1)"
      >
        <div class="title_time_lf">
          <i
            class="icon iconfont icon-shequguanli"
            style="color:red;"
          ></i>
        </div>
        <div class="title_time_lc">
          {{Query.name}}
        </div>
        <div class="title_time_lr">
          <i class="icon iconfont icon-fanhui-copy"></i>
        </div>
      </div>
    </div>
    <div class="box_main_bd">
      <div class="box_main_echarts">
        <div id="main_map">

        </div>
      </div>
      <div class="box_main_list">
        <ul class="box_main_listUl">
          <li
            class="box_main_list_item flex"
            v-for="(e,i) in yLists"
            :key="i"
          >
            <div
              :style="{'background-color': e.color}"
              class="box_main_list_item_type"
            ></div>
            <div class="box_main_list_item_txt">{{e.name}} {{e.value}}个</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
let echarts = require("echarts");
import taskApi from "../../requestApi/taskApi";
import dateModel from "../../components/Module/dateModel";
import { Toast } from "mint-ui";
export default {
  components: {
    dateModel
  },
  data() {
    return {
      Query: {
        name: "请选择"
      },
      // 日期
      timeIndex: 1,
      dataStateVal: false,
      timeVal: "请选择",
      xLists: [
        "#FE6E39",
        "#F6991B",
        "#639FC9",
        "#C5DB49",
        "#DF87CF",
        "#EF8484",
        "#88CFC7",
        "#18CFC7"
      ],
      yLists: [
        {
          value: 0,
          name: "农村党组织",
          id: "COUNTRYSIDE",
          color: "#FE6E39"
        },
        {
          value: 0,
          name: "社区党组织",
          id: "OFFICE",
          color: "#F6991B"
        },
        {
          value: 0,
          name: "机关党组织",
          id: "COMMUNITY",
          color: "#639FC9"
        },
        {
          value: 0,
          name: "国企党组织",
          id: "ENTERPRISES",
          color: "#C5DB49"
        },
        {
          value: 0,
          name: "学校党组织",
          id: "SCHOOL",
          color: "#DF87CF"
        },
        {
          value: 0,
          name: "新社会党组织",
          id: "SOCIETY",
          color: "#EF8484"
        },
        {
          value: 0,
          name: "非公有制党组织",
          id: "NONPUBLICOWNERSHIP",
          color: "#EF8484"
        },
        {
          value: 0,
          name: "其他党组织",
          id: "OTHER",
          color: "#88CFC7"
        }
      ]
    };
  },
  created: function() {},
  mounted() {
    let self = this;
    self.baseUserMessageDistributeFun();
    window.getAppgetUserToken = function(val) {
      self.baseUserInfoFun(val);
      self.listFun();
    };
    this.titleFun({
      title: "项目统计"
    });
  },
  methods: {
    mapListsFun() {
      let self = this;
      let eComVisitChart = echarts.init(document.getElementById("main_map"));
      eComVisitChart.setOption({
        series: [
          {
            silent: true,
            type: "pie",
            radius: 120,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 100,
                  fontSize: 12
                },
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            color: self.xLists,
            data: self.yLists
          }
        ]
      });
    },
    async listFun() {
      let self = this;
      let params = {};
      let res = await taskApi.GetApistatisticspartyorgmemberstatistics(params);
      if (res.statusCode == 200) {
        if (res.data) {
          let data = res.data;
          self.yLists.forEach(e => {
            for (let k in data) {
              if (e.id == k) {
                e.value = data[k];
              }
            }
          });
        } else {
          self.yLists = [
            {
              value: 0,
              name: "农村党组织",
              id: "COUNTRYSIDE",
              color: "#FE6E39"
            },
            {
              value: 0,
              name: "社区党组织",
              id: "OFFICE",
              color: "#F6991B"
            },
            {
              value: 0,
              name: "机关党组织",
              id: "COMMUNITY",
              color: "#639FC9"
            },
            {
              value: 0,
              name: "国企党组织",
              id: "ENTERPRISES",
              color: "#C5DB49"
            },
            {
              value: 0,
              name: "学校党组织",
              id: "SCHOOL",
              color: "#DF87CF"
            },
            {
              value: 0,
              name: "新社会组织党组织",
              id: "SOCIETY",
              color: "#EF8484"
            },
            {
              value: 0,
              name: "非公有制企业党组织",
              id: "NONPUBLICOWNERSHIP",
              color: "#EF8484"
            },
            {
              value: 0,
              name: "其他组织党组织",
              id: "OTHER",
              color: "#88CFC7"
            }
          ];
        }

        this.mapListsFun();
      } else {
        this.mapListsFun();
      }
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
/* 时间筛选 */
.title_time_lc {
  width: calc(100% - 2.4rem);
  margin-left: 0.2667rem;
  margin-right: 0.2667rem;
  height: 0.72rem;
  line-height: 0.72rem;
  font-size: 0.4rem;
  font-family: PingFang-SC-Medium;
  font-weight: 600;
  color: #000;
}

.title_time_lf,
.title_time_lr {
  width: 0.9333rem;
  height: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.title_time_lf i,
.title_time_lr i {
  color: #8c96a6;
  font-size: 0.3467rem;
}

.box_title_lf {
  width: calc(100% - 0.96rem);
  margin-left: 0.48rem;
  height: 0.72rem;
  border-radius: 0.0533rem;
  margin-left: 0.7733rem;
  margin-top: 0.32rem;
}

.box_title_lr::after {
  position: absolute;
  left: -0.5867rem;
  width: 0.3467rem;
  height: 0.0267rem;
  background: rgba(235, 46, 51, 1);
  top: 0.2933rem;
  content: "";
}

.box_title_lr {
  width: 3.8133rem;
  height: 0.72rem;
  background: rgba(248, 248, 248, 1);
  border-radius: 0.0533rem;
  margin-left: 0.88rem;
  margin-top: 0.32rem;
  position: relative;
}

.box_title {
  width: 100%;
  height: 1.3333rem;
  background: rgba(255, 255, 255, 1);
  margin-top: 0.1867rem;
}

/* 时间筛选 */
.box_main_list_item_type {
  width: 0.2133rem;
  height: 0.2133rem;
  background: rgba(254, 110, 57, 1);
  border-radius: 50%;
  margin-top: 0.08rem;
  margin-right: 0.32rem;
}

.box_main_list_item_txt {
  font-size: 0.3733rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(82, 99, 111, 1);
}

.box_main_list_item {
  width: 4rem;
  height: 0.4rem;
  margin-left: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.3733rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(82, 99, 111, 1);
}

.box_main_list_item:nth-child(2),
.box_main_list_item:nth-child(4),
.box_main_list_item:nth-child(6),
.box_main_list_item:nth-child(8) {
  margin-left: 1.3333rem;
}

.box_main_list_item:nth-child(3),
.box_main_list_item:nth-child(4),
.box_main_list_item:nth-child(5),
.box_main_list_item:nth-child(6),
.box_main_list_item:nth-child(7),
.box_main_list_item:nth-child(8),
.box_main_list_item:nth-child(9) {
  margin-top: 0.4rem;
}

.box_main_listUl {
  display: flex;
  flex-wrap: wrap;
}

.box_main_list {
  min-height: 1.2rem;
  width: 100%;
  margin-top: 0.1333rem;
}

/* 图表 */

#main_map {
  width: 242px;
  height: 242px;
  overflow: hidden;
  position: absolute;
  top: 48px;
  left: calc(50vw - 121px);
}

.main_map_copy {
  width: 242px;
  height: 242px;
  overflow: hidden;
  position: absolute;
  top: 48px;
  left: calc(50vw - 121px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.box_main_echarts {
  width: 100%;
  height: 325px;
  overflow: hidden;
  position: relative;
}

/* 图表 */
.box_main_bd {
  width: 100%;
  height: calc(100vh - 1.7333rem);
  background: rgba(255, 255, 255, 1);
  margin-top: 0.1867rem;
  overflow: hidden;
}

.box {
  background: #f6f6f6;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
</style>
